<template>
  <div
    class="app-content"
    v-wechat-title="$route.meta.title">
    <!-- <van-nav-bar :title="$route.meta.title" left-text border left-arrow @click-left="$router.back()" /> -->
    <div class="section">
      <div class="item gray between">
        <div>{{ payInfo.name }}</div>
        <div>{{ payInfo.rush_price }}</div>
      </div>
      <div class="item gray end">
        <div>x1</div>
      </div>
      <!-- <div class="item orange between border">
                 <div>优惠</div>
                 <div>- ￥</div>
			</div>-->
      <!-- <div class="item total end">
                 <div class="black">实付金额</div>
                 <div class="price"></div>
			</div>-->
    </div>

    <div class="section">
      <div
        class="item between"
        v-for="(item,index) in payWay"
        :key="item.way"
        @click="changePayWay(index)"
      >
        <div class="left_wrap">
          <div class="top">{{ item.way }}</div>
          <div class="bottom">{{ item.info+($util.isEmpty(payInfo.seller_money) ? 0 : payInfo.seller_money) }}</div>
        </div>
        <div
          class="right_sel"
          :class="{on: activePay === index}"/>
      </div>
    </div>

    <div class="footer">
      <div class="left">
        <span class="gray pr11">合计</span>
        <span class="orange">{{ `￥${payInfo.rush_price}` }}</span>
      </div>
      <div
        class="right"
        @click="pay()"
        :class="{off: !canPay}">立即兑换</div>
    </div>

    <!-- <van-dialog v-model="showDialog" :message="message" title="" :show-cancel-button="true" cancel-button-text="去充值" cancel-button-color="#FF6900" confirm-button-text="获取积分" confirm-button-color="#FF6900" :close-on-click-overlay="true" @confirm="getIntegral()" @cancel="recharge()"></van-dialog> -->
  </div>
</template>

<script>
import { Dialog } from 'vant'
import { setTimeout } from 'timers'
import { apiCenter } from '@/api'

export default {
	name: 'GrabOrderPay',
	data() {
		return {
			payWay: [
				{
					way: '余额支付',
					info: '当前余额：￥'
				}
				// ,
				// {
				//     way: '积分兑换',
				//     info: '当前积分：'
				// }
			],
			activePay: 0,
			// showDialog: false,
			message: '你的余额/积分不足, 无法兑换抢单，您可以选择',
			payInfo: {},
			canPay: false,
			pastParams: {}
		}
	},
	components: {
		[Dialog.Component.name]: Dialog.Component
	},
	created() {
		this.pastParams = this.$route.query.pastParams
		this.init()
	},
	methods: {
		init() {
			return apiCenter
				.grabOrderPayInfo({ prebook_id: this.$route.query.prebook_id })
				.then((res) => {
					if (res.status === 'success') {
						const {
							name,
							rush_price,
							rush_points,
							rush_status,
							seller_money,
							pay_points,
							prebook_id,
							mobile_phone,
							xiaoqu
						} = res.data
						// this.pastParams.mobile_phone = mobile_phone;
						// this.pastParams.xiaoqu = xiaoqu;
						// this.pastParams.prebook_id = prebook_id;
						if (parseFloat(seller_money) < parseFloat(rush_price) || this.$util.isEmpty(seller_money)) {
							this.canPay = false
						} else {
							this.canPay = true
						}

						this.payInfo = {
							name,
							rush_price,
							rush_points,
							rush_status,
							seller_money,
							pay_points,
							prebook_id
						}
					} else {
						this.$toast(res.errors.message)
					}
				})
		},
		changePayWay(index) {
			this.activePay = index
		},
		pay() {
			if (!this.canPay) {
				//   this.showDialog = true
				this.$toast('余额不足，请充值')
				setTimeout(() => {
					this.recharge()
				}, 1000)
			} else if (this.payInfo.rush_status === 2) {
				this.$toast('该订单已被抢')
			} else {
				const params = { prebook_id: this.payInfo.prebook_id }
				this.activePay === 0
					? (params.pay_type = 'price')
					: (params.pay_type = 'points')
				return apiCenter.payGrabOrder(params).then((res) => {
					if (res.status === 'success') {
						const data = res.data
						const pastParams = {
							name: data.name,
							mobile_phone: data.mobile_phone,
							xiaoqu: data.xiaoqu,
							house_type: `${data.house_shi}房${data.house_ting}厅${data.house_yang}阳${data.house_wei}卫${this.$util.isEmpty(data.house_chu) ? 0 : data.house_chu}厨`,
							square: `${data.square}㎡`,
							create_user_id: data.create_user_id,
							...this.pastParams
						}
						this.$router.push({
							name: 'grabOrderSucc',
							query: pastParams
						})
					} else {
						this.$toast(res.errors.message)
					}
				})
			}
		},
		getIntegral() {
			this.$router.push({
				name: 'MyMission'
			})
		},
		recharge() {
			this.$router.push({
				name: 'PersonRecharge',
				query: {
					owner_user_id: this.$route.query.owner_user_id
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
	.pr11 {
		padding-right: 11px;
	}
	.gray {
		font-size: 28px;
		color: rgba(102, 102, 102, 1);
	}
	.orange {
		font-size: 28px;
		color: rgba(255, 105, 0, 1);
	}
	.section {
		margin-top: 20px;
		padding-left: 30px;
		background-color: #fff;
		.item {
			display: flex;
			align-items: center;
			height: 100px;
			padding-right: 30px;
			&.border {
				border-bottom: 1px solid rgba(221, 221, 221, 1);
			}
			&.end {
				justify-content: flex-end;
			}
			&.between {
				justify-content: space-between;
			}
			.black {
				font-size: 26px;
				color: rgba(51, 51, 51, 1);
				padding-right: 20px;
			}
			&.total {
				.price {
					font-size: 36px;
					color: rgba(255, 102, 0, 1);
				}
			}
			.left_wrap {
				padding-left: 68px;
				&:nth-child(1) {
					background: url("~@/assets/image/center/balance.png") no-repeat
						left center/44px 44px;
				}
				&:nth-child(2) {
					background: url("~@/assets/image/center/integral.png") no-repeat
						left center/44px 44px;
				}
				.top {
					line-height: 1;
					font-size: 28px;
					color: rgba(51, 51, 51, 1);
				}
				.bottom {
					line-height: 1;
					margin-top: 9px;
					font-size: 24px;
					color: rgba(153, 153, 153, 1);
				}
			}
			.right_sel {
				width: 46px;
				height: 46px;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid #ccc;
				background-color: #fff;
				&.on {
					border: 0 none;
					background: url("~@/assets/image/common/selected.png") no-repeat
						center/cover #ffd11a;
				}
			}
		}
	}

	.footer {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		width: 100%;
		height: 100px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px -2px 10px 0px rgba(51, 51, 51, 0.1);
		.left {
			text-align: right;
			padding-right: 21px;
			flex: 1;
			height: 100%;
			line-height: 100px;
			font-size: 24px;
			color: rgba(255, 105, 0, 1);
		}
		.right {
			width: 300px;
			height: 100%;
			line-height: 100px;
			text-align: center;
			background: rgba(255, 209, 26, 1);
			font-size: 32px;
			color: rgba(58, 27, 4, 1);
			&.off {
				color: #fff;
				background-color: "#ccc";
			}
		}
	}
</style>
